import { NavBar, Form, Input, Button, Toast } from 'antd-mobile'
import styles from './index.module.css'
import { getLoginApi, type Params } from '@/api/login'
import { useNavigate } from 'react-router-dom'

const Login = () => {
  const navigate = useNavigate()

  const getLogin = async (values: Params) => {
    try {
      const { data } = await getLoginApi(values)
      console.log('login', data)
      if (data.message === 'OK') {
        localStorage.setItem('token', data.data.token)
        navigate('/')
      } else {
        Toast.show({
          content: '登录失败',
          afterClose: () => {
            console.log('after')
          },
        })
      }
    } catch (error) {
      console.log('login', error)
    }
  }

  const onFinish = (values: Params) => {
    console.log(values)
    getLogin(values)
  }

  return (
    <div className={styles.login}>
      <NavBar back={null}>登录页</NavBar>
      <div className={styles.form}>
        <Form
          onFinish={onFinish}
          layout='horizontal'
          mode='card'
          footer={
            <Button block type='submit' color='primary' size='large'>
              登录
            </Button>
          }
        >
          <Form.Item
            label='手机号'
            name='mobile'
            rules={[
              { required: true, message: '请输入手机号' },
            ]}
          >
            <Input placeholder='请输入手机号' />
          </Form.Item>
          <Form.Item
            label='验证码'
            name='code'
            rules={[
              { required: true, message: '请输入验证码' },
            ]}
          >
            <Input placeholder='请输入验证码' />
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
export default Login